<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        数学: <input type="text" v-model="mathScore">
        英语: <input type="text" v-model="englishScore"> <br>
        <!-- 标签进行双向绑定调用普通函数时，需要加() -->
        总分(普通函数-单向): <input type="text" v-model="sumScore()"> <br>
        <!-- 计算属性因为是属性，所以不需要加() -->
        总分(计算属性-单向): <input type="text" v-model="sumScore2"> <br>
        <!-- 计算属性双向绑定 -->
        总分(计算属性-双向): <input type="text" v-model="sumScore3"> <br>
        <!-- 通过watch选项监听数学分数，当数学更新后回调函数中重新计算总分sumScore3 -->
        总得分(监听器): <input type="text" v-model="sumScore4">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        /*
        1.函数没有缓存，
        2.计算属性有缓存，只有发生改变的时候才会重新计算
        3.函数只支持单向绑定
        4.计算属性默认只有getter函数，没有setter函数
            如果你需要双向绑定，就需要自己定义setter方法
        */
        var vm = new Vue({
            el:"#app",
            data:{
                mathScore:80,
                englishScore:80,
                sumScore4:0,
            },
            methods: {
                sumScore:function(){
                    console.log("sumScore方法")
                    //进行浅式的类型转换-0 为了字符串转为数运算
                    return (this.mathScore-0)+(this.englishScore-0);
                },
            }, 
            //定义计算属性****
            computed:{
                //这是单向绑定，默认只有getter方法
                sumScore2:function(){ //计算属性有缓存，如果计算属性内的属性值没有发生变化，则不会重新计算，只有发生改变的时候才会重新计算
                    console.log("sumScore2方法")
                    //进行浅式的类型转换-0 为了字符串转为数运算
                    return (this.mathScore-0)+(this.englishScore-0);
                },
                //双向绑定，有get和set方法
                //有了get和set方法以后就可以进行双向绑定
                sumScore3:{
                    get:function(){
                        console.log("sumScore3.get方法");
                        return (this.mathScore-0)+(this.englishScore-0);
                    },
                    set:function(newValue){
                        console.log("sumScore3.set方法");
                        var avaScore=newValue/2;
                        this.mathScore=avaScore;
                        this.englishScore=avaScore;
                    },
                }
            },
            //定义监听器，单向绑定
            watch:{
                //监听数学成绩的变化，只有当数学成绩变化才会执行监听器
                //好处就
                mathScore:function(newValue,oldValue){
                    console.log("watch监听器，监听到数学成绩已经更新");
                    this.sumScore4=(newValue-0)+(this.englishScore-0);
                },
            }
        });
        //监听方式2：通过vue实例进行调用
        vm.$watch('englishScore',function(newValue){
            console.log("watch监听器，监听到英语成绩已经更新");
            this.sumScore4=(newValue-0)+(this.englishScore-0);
        })
    </script>
</body>
</html>